<template>
  <div>
    <!-- <h1>Home</h1> -->
    <!-- head -->
    <Headers :city="city"></Headers>
    <!-- banner -->
    <swiper :swiperList="swiperList"></swiper>
    <!-- img-txt -->
    <icons :iconList="iconList"></icons>
    <!-- commend -->
    <commend :commend='recommendList'></commend>
    <!-- main -->
    <weekend :weekend='weekendList'></weekend>
    <!-- city -->
    <router-view></router-view>
  </div>
</template>
<script>
import axios from "axios";
import Headers from "./components/header/Header";
import swiper from "./components/swiper/swiper";
import icons from "./components/icon/icon";
import commend from "./components/commend/commend";
import weekend from "./components/weekend/weekend";
export default {
  name: "",
  components: {
    Headers,
    swiper,
    icons,
    commend,
    weekend,
  },
  props: [],
  data() {
    return {
      city: "",
      iconList: [],
      swiperList: [],
      recommendList: [],
      weekendList: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      axios.get("/static/index.json").then((res) => {
        // console.log(res.data.data)
        this.city = res.data.data.city;
        this.iconList = res.data.data.iconList;
        this.swiperList = res.data.data.swiperList;
        this.recommendList = res.data.data.recommendList;
        this.weekendList = res.data.data.weekendList
      });
    },
  },
};
</script>
<style lang='stylus' scoped></style>